import React, { Component } from "react";
import { Card, Input, Form } from "antd";
import { connect } from "dva";

@connect(stores => ({
  registerData: stores.channelRegisterModel
}))
class ImConfig extends Component {
  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    };

    return (
      <Card
        title={<span>渠道配置</span>}
        style={{ marginTop: 16, marginBottom: 16 }}
      >
        <Form {...formItemLayout} style={{ width: 800 }}>
          <Form.Item label="系统名称">
            {getFieldDecorator("apiName", {
              rules: [
                {
                  required: true,
                  message: "请输入系统名称！",
                  whitespace: true
                }
              ]
            })(<Input style={{ width: 466 }} placeholder="请输入系统名称" />)}
          </Form.Item>
          <Form.Item label="蓝信地址">
            {getFieldDecorator("apiUrl", {
              rules: [
                {
                  required: true,
                  message: "请输入蓝信地址！"
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={100}
                placeholder="请输入蓝信地址"
              />
            )}
          </Form.Item>
          <Form.Item label="应用ID">
            {getFieldDecorator("apiAppKey", {
              rules: [
                {
                  required: true,
                  message: "请输入应用ID！",
                  whitespace: true
                }
              ]
            })(<Input style={{ width: 466 }} placeholder="请输入应用ID" />)}
          </Form.Item>

          <Form.Item label="秘钥">
            {getFieldDecorator("apiAppSecret", {
              rules: [
                {
                  required: true,
                  message: "请输入秘钥!",
                  whitespace: true
                }
              ]
            })(<Input style={{ width: 466 }} placeholder="请输入秘钥" />)}
          </Form.Item>
          <Form.Item label="授权类型码">
            {getFieldDecorator("grandType", {
              rules: [
                {
                  required: true,
                  message: "请输入授权类型码！",
                  whitespace: true
                }
              ]
            })(<Input style={{ width: 466 }} placeholder="请输入授权类型码" />)}
          </Form.Item>
        </Form>
      </Card>
    );
  }
}

export default ImConfig;
